<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div
    class="mobile-cell"
    @click="$emit('click')">
    <!--头像-->
    <span
      v-lazy:background-image="icon || defaultImage"
      class="icon w-image-fit"/>
    <p
      class="title w-text-line-1"
      :class="{'w-text-bottom-line': link}">
      <span @click.stop="pushToLink">{{ header }}</span>
    </p>
    <p class="detail w-text-line-2">{{ detail }}</p>
    <p class="time">{{ time }}</p>
  </div>
</template>

<script>
  import Config from '@/config/index'

  /**
   * TableViewCell
   */
  export default {
    name: 'ComMobileCell',
    props: {
      /**
       * Cell Icon
       */
      icon: {
        type: String,
        default: ''
      },
      /**
       * 标题
       */
      header: {
        type: String,
        default: ''
      },
      /**
       * 详情
       */
      detail: {
        type: String,
        default: ''
      },
      /**
       * 事件
       */
      time: {
        type: String,
        default: ''
      },
      /**
       * 跳转链接
       */
      link: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        /**
         * 默认图片
         */
        defaultImage: Config.defaultImage
      }
    },
    methods: {
      /**
       * 跳转到指定链接
       */
      pushToLink() {
        if (this.link) {
          window.open (this.link)
        } else {
          this.$emit ('click')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .mobile-cell {
    height: 100px;
    position: relative;
    padding: 5px 10px 10px 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: #eee;
    margin: 5px 0;

    >.icon {
      position: absolute;
      left: 5px;
      top: 5px;
      width: 90px;
      height: 90px;
    }

    > p {
      margin: 0;
    }

    > .title {
      height: 18px;
      font-size: 18px;
      color: #333333;
      font-weight: bold;
    }

    > .detail {
      height: 40px;
      font-size: 14px;
      color: #656b79;
      line-height: 20px;
    }

    > .time {
      height: 14px;
      font-size: 14px;
      color: #999999;
    }

    > .link-icon {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
</style>
